import React,{Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TextInput,
    Modal,
    StatusBar,
    ScrollView,
    Image,
    TouchableWithoutFeedback,
    ActivityIndicator,
    Animated,
    Easing,
} from 'react-native';
import request from '../request/request';
import Header from './header/Header';
import Loading from 'react-native-lindf-loading';
export default class OrderDetail extends Component{
	constructor(props) {
        super(props);
        // 初始状态
        this.state = {
         	hasAddress: true,
         	id: 10,
     		name: '林帅帅',
     		mobile: '1808461629',
     		addressId: 400120,
     		address: '广东省深圳市宝安区宝源路亨林大厦亨林大厦亨林大厦',

     		// 弹窗初始数据
            currentPosition: 350,//缩放标志位，记录当前value
            position: new Animated.Value(350), //设置初始值
            // 弹窗的显示与隐藏
            mask: false,

            // 支付方式
            payType: 0
        };
    }

    payConfirm(){
        let that = this;
        this.setState({
            mask: !this.state.mask
        },function () {
            that.state.currentPosition = that.state.currentPosition==350?0:350;
            Animated.spring(
                that.state.position,
                {
                    toValue: that.state.currentPosition,
                    easing: Easing.linear,
                    speed: 20,
                    bounciness: 5,
                    useNativeDriver: true
                }
            ).start()
        });
        
    }

    // 选择支付方式
    choosePay(data){
    	this.setState({
    		payType: data
    	});
    }

	render(){
		const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        let barHeight = StatusBar.currentHeight;
        let that = this;
		return (
			<View style={{flex: 1, backgroundColor: '#fff'}}>
				<Header isShowBack={true} title='确认订单' goBack={goBack} />
				<ScrollView>
					<View style={styles.detailContent}>
						<TouchableWithoutFeedback onPress={()=>navigate('ChooseAddress',
							{
								callback: (data)=>{
			                        // alert(data.name); // 打印值为：'回调参数'
			                        if(data){
										that.setState({
											id: data.id,
								     		name: data.name,
								     		mobile: data.mobile,
								     		addressId: data.addressId,
								     		address: data.address,
										});
			                        }
			                    }
							}
						)}>
							<View style={styles.detailAddress}>
								<View style={{minHeight: 43, flex: 1, flexDirection: 'row', alignItems: 'center'}}>
									<View style={{width: 21, height: 32, justifyContent: 'center',marginRight: 10}}>
										<Image 
				                            style={{width: 21, height: 31}}
				                            source={require('../images/shouhuo.png')}
		                        		/>
									</View>
									{
										this.state.hasAddress?
										<View style={{flex: 1}}>
											<View style={styles.detailAddressTop}>
												<Text style={styles.detailAddressTopText}>收货人：{this.state.name}</Text>
												<Text style={styles.detailAddressTopText}>{this.state.mobile}</Text>
											</View>
											<View style={styles.detailAddressBottom}>
												<Text style={styles.detailAddressTopText}>收货地址：{this.state.address}</Text>
											</View>
										</View>
										:
										<View style={{minHeight: 43, flex: 1, flexDirection: 'row', alignItems: 'center'}}>
											<Text style={{fontSize: 15, color: '#636363'}}>添加地址+</Text>
										</View>
									}
									
								</View>
								<Image 
	                                style={{width: 8, height: 16, marginLeft: 10}}
	                                source={require('../images/rightGo.png')}
	                            />
							</View>
						</TouchableWithoutFeedback>

						<View style={styles.detailShop}>
							<View style={styles.itemBox}>
								<View style={styles.itemChild}>
		                            <View style={styles.itemChildCenter}>
		                                <Image 
		                                    style={styles.itemChildCenterImg}
		                                    source={{uri: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg'}}
		                                />
		                            </View>
		                            <View style={styles.itemChildBottom}>
		                                <Text numberOfLines={2} style={styles.itemChildBottomText}>这是标题这是标题这是标题这是标题题这是标题这是标题题</Text>
		                                <View>
		                                    <View style={styles.itemChildBottomBox}>
		                                        <Text style={styles.itemChildBottomBoxPrice}>{'￥' + 2800}</Text>
		                                        <Text style={styles.itemChildBottomBoxText}>{'x' + 1}</Text>
		                                    </View>
		                                </View>
		                            </View>
		                        </View>
							</View>

							<View style={styles.itemBox}>
								<View style={styles.itemChild}>
		                            <View style={styles.itemChildCenter}>
		                                <Image 
		                                    style={styles.itemChildCenterImg}
		                                    source={{uri: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg'}}
		                                />
		                            </View>
		                            <View style={styles.itemChildBottom}>
		                                <Text numberOfLines={2} style={styles.itemChildBottomText}>这是标题这是标题这是标题这是标题题这是标题这是标题题</Text>
		                                <View>
		                                    <View style={styles.itemChildBottomBox}>
		                                        <Text style={styles.itemChildBottomBoxPrice}>{'￥' + 2800}</Text>
		                                        <Text style={styles.itemChildBottomBoxText}>{'x' + 1}</Text>
		                                    </View>
		                                </View>
		                            </View>
		                        </View>
							</View>

						</View>

						<View style={styles.shopInfo}>
							<View style={styles.shopInfoItem}>
								<Text style={styles.shopInfoItemText}>配送方式：快递</Text>
								<Text style={styles.shopInfoItemText}>免运费</Text>
							</View>
						</View>

						<View style={styles.shopInfo}>
							<View style={[styles.shopInfoItem, styles.shopInfoItemWords]}>
								<Text style={styles.shopInfoItemText}>买家留言：</Text>
								<TextInput
			                        style={{
			                            width: 200,
			                            height: 21,
			                            padding: 0,
			                            paddingLeft: 8,
			                            fontSize: 12,
			                            color: '#8b8b8b'
			                        }}
			                        placeholder={'点击编写留言'}
			                        placeholderTextColor='#747474'
			                        underlineColorAndroid={'transparent'}
			                        onChangeText={(text)=>this.setState({name: text})}
			                    />
							</View>
						</View>

						<View style={styles.shopInfo}>
							<View style={styles.shopInfoItem}>
								<Text style={styles.shopInfoItemText}>小计：</Text>
								<Text style={styles.itemChildBottomBoxPrice}>{'￥' + 5600}</Text>
							</View>
						</View>
					</View>
				</ScrollView>

				<View style={styles.bottomBox}>
                    <View style={styles.bottomBoxOne}>
                        <View style={{flexDirection: 'row',marginRight: 5}}>
                            <Text style={{fontSize: 14, color: '#0048c1'}}>共计：</Text>
                            <Text style={{fontSize: 14, color: '#fe0405'}}>{'￥' + 5600}</Text>
                        </View>
                    </View>
                    <TouchableWithoutFeedback onPress={()=>this.payConfirm()}>
                        <View style={[styles.bottomBoxTwo,styles.bottomBoxTwoBg]}>
                            <Text style={styles.bottomBoxTwoText}>结算</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </View>

                {
                    this.state.mask?
                    <TouchableWithoutFeedback onPress={()=>this.payConfirm()}>
                        <View style={{position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)', zIndex: 100}}></View>
                    </TouchableWithoutFeedback>
                    :
                    null
                }

                <Animated.View style={{position: 'absolute', left: 0, right: 0, bottom: 0, borderTopLeftRadius: 10, borderTopRightRadius: 10, transform: [{translateY:this.state.position}], backgroundColor: '#fff', zIndex: 1000}}>
                    <View style={{height: 45, justifyContent: 'center', alignItems: 'center', borderBottomWidth: 1, borderColor: '#ddd'}}>
                    	<Text style={{fontSize: 17, color: '#000000'}}>确定支付</Text>
                    	<TouchableWithoutFeedback onPress={()=>this.payConfirm()}>
	                    	<View style={{position: 'absolute', left: 12, top: 10,}}>
								<Image 
		                            style={{width: 25, height: 25}}
		                            source={require('../images/close.png')}
		                        />
	                    	</View>
                    	</TouchableWithoutFeedback>
                    </View>

                    <View style={{paddingTop: 20, paddingBottom: 10, paddingLeft: 25, paddingRight: 25, justifyContent: 'center', alignItems: 'center'}}>
						<Text style={{fontSize: 24, color: '#ff0000'}}>￥5600.00</Text>
                    </View>

                    <View style={{paddingLeft: 25, paddingRight: 25}}>
                    	<TouchableWithoutFeedback onPress={()=>this.choosePay(0)}>
							<View style={{paddingTop: 12, paddingBottom: 12,flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottomWidth: 1, borderColor: '#ddd'}}>
								<View style={{flexDirection: 'row', alignItems: 'center'}}>
									<Image 
			                            style={{width: 28, height: 28, marginRight: 7}}
			                            source={require('../images/wechatpay.png')}
			                        />
									<Text style={{fontSize: 16, color: '#000000'}}>微信支付</Text>
								</View>

								{
									this.state.payType==0?
									<Image 
			                            style={{width: 21, height: 21}}
			                            source={require('../images/address-active.png')}
			                        />
			                        :
			                        <Image 
			                            style={{width: 21, height: 21}}
			                            source={require('../images/address.png')}
			                        />
								}
		                    </View>
	                    </TouchableWithoutFeedback>
	                    <TouchableWithoutFeedback onPress={()=>this.choosePay(1)}>
		                    <View style={{paddingTop: 12, paddingBottom: 12,flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottomWidth: 1, borderColor: '#ddd'}}>
								<View style={{flexDirection: 'row', alignItems: 'center'}}>
									<Image 
			                            style={{width: 28, height: 28, marginRight: 7}}
			                            source={require('../images/alipay.png')}
			                        />
									<Text style={{fontSize: 16, color: '#000000'}}>支付宝支付</Text>
								</View>

								{
									this.state.payType==1?
									<Image 
			                            style={{width: 21, height: 21}}
			                            source={require('../images/address-active.png')}
			                        />
			                        :
			                        <Image 
			                            style={{width: 21, height: 21}}
			                            source={require('../images/address.png')}
			                        />
								}
		                    </View>
	                    </TouchableWithoutFeedback>
                    </View>

                    <View style={{paddingTop: 25, paddingBottom: 25, flexDirection: 'row', justifyContent: 'center'}}>
                    	<TouchableWithoutFeedback onPress={()=>this.payConfirm()}>
	                    	<View style={{width: 180, height: 40, justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#5454d4', borderRadius: 8}}>
	                    		<Text style={{fontSize: 16, color: '#5454d4'}}>确认支付</Text>
	                    	</View>
                    	</TouchableWithoutFeedback>
                    </View>
                </Animated.View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
    detailContent: {
    	backgroundColor: '#fafafa'
    },
    detailAddress: {
    	backgroundColor: '#fff',
    	paddingTop: 12,
    	paddingBottom: 12,
    	paddingLeft: 15,
    	paddingRight: 15,
    	// marginBottom: 10,
    	flexDirection: 'row',
    	justifyContent: 'space-between',
    	alignItems: 'center',
    	borderBottomWidth: 1,
    	borderColor: '#eee'
    },
    detailShop: {
    	// marginBottom: 10,
    },
    detailAddressTop: {
    	flexDirection: 'row',
    	justifyContent: 'space-between',
    	alignItems: 'center',
    	marginBottom: 8
    },
    detailAddressTopText: {
    	fontSize: 13,
    	lineHeight: 16,
    	color: '#5a5a5a'
    },
    detailAddressBottom: {
    	flexDirection: 'row',
    	alignItems: 'flex-start'
    },
    itemBox: {borderBottomWidth: 1, borderColor: '#eee',paddingLeft: 7, backgroundColor: '#fff'},
    itemChild: {height: 92, paddingLeft: 8, paddingTop: 8, paddingBottom: 8, backgroundColor: '#ffffff', flexDirection: 'row'},
    itemChildTopText: {width: 11, height: 11, alignItems: 'center', backgroundColor: '#0048c2', borderRadius: 100},
    itemChildTopTextActiveColor: {backgroundColor: '#0048c2'},
    itemChildTopTextColor: {backgroundColor: '#b6b6b6'},
    itemChildCenter: {width: 85, height: 75,marginRight: 10},
    itemChildCenterImg: {width: 85, height: 75},
    itemChildBottom: {flex: 1, paddingRight: 12, justifyContent: 'space-between'},
    itemChildBottomText: {fontSize: 13, color: '#3a3a3a'},
    itemChildBottomBox: {flexDirection: 'row', justifyContent: 'space-between'},
    itemChildBottomBoxText: {fontSize: 11, color: '#828282'},
    itemChildBottomBoxPrice: {fontSize: 12, color: '#fd0408'},
    itemChildNext: {height: 38, paddingTop: 5, paddingBottom: 5, backgroundColor: '#fff', flexDirection: 'row', justifyContent: 'flex-end'},
    itemChildNextView: {minWidth: 65, borderWidth: 1, borderColor: '#eee', borderRadius: 20, justifyContent: 'center', alignItems: 'center', marginRight: 10},
    itemChildNextViewText: {fontSize: 12},
    shopInfo: {
    	backgroundColor: '#fff',
    	paddingTop: 8,
    	paddingBottom: 8,
    	paddingLeft: 15,
    	paddingRight: 15,
    	// marginBottom: 10,
    	borderBottomWidth: 1,
    	borderColor: '#eee'
    },
    shopInfoItem: {
    	flexDirection: 'row',
    	justifyContent: 'space-between',
    	alignItems: 'center'
    },
    shopInfoItemText: {
    	fontSize: 12,
    	lineHeight: 21,
    	color: '#8b8b8b'
    },
    shopInfoItemCode: {
    	justifyContent: 'flex-start',
    },
    shopInfoItemWords: {
    	justifyContent: 'flex-start',
    	alignItems: 'flex-start'
    },

    bottomBox: {height: 42, flexDirection: 'row', paddingLeft: 10, position: 'absolute', left: 0, right: 0, bottom: 0, backgroundColor: '#fff', borderTopWidth: 1, borderColor: '#ddd'},
    bottomBoxOne: {flex: 1, height: 42, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center'},
    bottomBoxTwo: {width: 105, height: 42, justifyContent: 'center',alignItems: 'center'},
    bottomBoxTwoBg: {backgroundColor: '#0048c1'},
    bottomBoxTwoText: {fontSize: 14, color: '#fff'},
})